
import { ArticleModelState, useDispatch, useSelector, history } from "umi"
import { useEffect } from "react"

const classNames = require('classnames');
import Swiper from '@/components/Swiper'
import Articlenav from '@/components/articlenav'
import Articletags from "@/components/essay/Articletags"
import Recommendread from "@/components/essay/recommendread"
import './index.less';
import styles from './index.less';
import styless from '../components/essay/index.less';
import { formatDate } from '@/utils';
import { EyeOutlined, HeartOutlined, PartitionOutlined } from '@ant-design/icons';
import Popup from "@/components/Popup";
import ImageViewer from "@/components/ImageViewer";


export default function IndexPage() {
  const dispatch = useDispatch();
  const { articleList, articleSwiper } = useSelector((state: { article: ArticleModelState }) => state.article);

  // 在每次刷新页面的时候都会执行 第二个参数是空数组 只会执行一遍

  useEffect(() => {
    dispatch({
      //  命名空间
      type: "article/getArticlesList"
    })
  }, [])

  useEffect(() => {
    dispatch({
      //  命名空间
      type: "article/getArticleSwipers"
    })
  }, [])



  return (
    <div className={styles.articleAll}>
      <ImageViewer>
      <div className={classNames(styles.container1, styles.view)}>
        <div className={classNames(styles.content1)}>
          <div className={styles.leftarticle}>
            {/* 轮播图 */}
            <div className={styles.articleimg}>
              <Swiper ImgList={articleSwiper}></Swiper>
            </div>
            {/* 文章 */}
            <div className={styles.articleList}>
              <Articlenav></Articlenav>
              <div className={styles.articleListItem}>

                {articleList.map(item => {
                  return <div key={item.id} >
                   
                    <div className={styles.articleListItems}>
                      <header>
                         <a href={`/article/${item.id}`}>
                        <div className={styles.titles1}>
                          <p>{item.title}</p>
                        </div>
                        </a> 
                        <div className={styles.titles2}>
                          <span className={classNames(styles.shu, styles.shu1)}> ︱</span>
                          <span>{formatDate(item.publishAt)}前</span>
                          {
                            item.category != null ? <span className={styles.shu}>  ︱ </span> : <div></div>
                          }
                          <span>{item.category?.label}</span>
                        </div>
                      </header>
                      <main className={styles.titleitem}>
                        {
                          item.cover != null ? <div className={styles.imgs}>
                            <img src={item.cover} alt="" />
                          </div> : null
                        }
                        <div className={styles.rightitem}>
                          <p>{item.summary}</p>
                          <div>
                            <span><i><HeartOutlined /></i>{item.likes}</span>

                            <span><i><EyeOutlined /></i>{item.views}</span>

                            <span><Popup ProputItem={item}><i><PartitionOutlined /></i>分享</Popup></span>
                          
                          </div>
                        </div>
                      </main>
                    </div>
                  
                  </div>
                })}
                {articleList.length && <div>loading...</div>}
              </div>
            </div>
          </div>
          <div className={styless.sidebar}>
            <div className={styless.sidebarins_1}>
              <div className={styless.sidebarins_2}>
                <Recommendread />
              </div>
              <div className={styless.sidebarins_3}>
                <Articletags />
              </div>
            </div>
          </div>
        </div>
      </div>
      </ImageViewer>
    </div>
  );
}
